<template>
  <vab-card class="box">
    <template #header>基础信息</template>
    <el-form :model="baseForm" ref="baseRef" :rules="rules">
      <el-row :gutter="24">
        <el-col
          v-for="(item, index) in MeansBaseCloums"
          :key="index"
          :xs="24"
          :sm="12"
          :md="12"
          :lg="askType == 'default' ? 12 : 8"
          :xl="8"
        >
          <template v-if="askType != 'default'">
            <el-form-item
              v-if="item.type == 'input'"
              :label="item.label"
              :prop="item.prop"
              :required="isRequired(item)"
            >
              <VabInputForm
                :disabled="isDisable(item)"
                v-model="baseForm[item.prop]"
              />
            </el-form-item>
            <el-form-item
              v-if="item.type == 'address'"
              :label="item.label"
              :prop="item.prop"
              :required="isRequired(item)"
            >
              <el-cascader
                clearable
                class="width_100"
                :disabled="item.disabled"
                :options="addressOptions"
                v-model="baseForm[item.prop]"
                :props="{ value: 'name', label: 'name' }"
              />
            </el-form-item>
            <el-form-item
              v-if="item.type == 'select'"
              :label="item.label"
              :prop="item.prop"
              :required="isRequired(item)"
            >
              <VabSelectForm
                class="width_100"
                :disabled="item.disabled"
                v-model="baseForm[item.prop]"
              />
            </el-form-item>
          </template>
          <div class="detail-mode" v-else>
            <span class="label">{{ item.label }}</span>
            <span class="text" :title="_FieldFormat(item, index)">
              {{ _FieldFormat(item, index) }}
            </span>
            <!-- <span class="text">
              {{ baseForm[item.prop] }}
            </span> -->
          </div>
        </el-col>
      </el-row>
    </el-form>
  </vab-card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { MeansBaseCloums } from './means'
  import { FieldFormat } from '~/src/utils/utils'

  defineOptions({
    name: 'AddBaseMode',
  })

  const props = defineProps({
    askType: {
      type: String,
      default: 'default',
    },
    addressOptions: {
      type: Array,
      default: [],
    } as any,
  })

  const baseForm = ref<any>({})

  /**
   * @var
   */
  const baseRef = ref()

  const rules = {
    name: [
      {
        required: true,
        message: '客户名称不能为空！',
        trigger: 'blur',
      },
    ],
    contact: [
      {
        required: true,
        message: '联系人不能为空！',
        trigger: 'blur',
      },
    ],
    tel: [
      {
        required: true,
        message: '联系电话不能为空！',
        trigger: 'blur',
      },
      { min: 3, max: 11, message: '联系电话长度应为3-11位', trigger: 'blur' },
    ],
  }

  /**
   *
   * @method
   */

  // 字段级格式化
  const _FieldFormat = (row: any, i: number) => {
    const _value = baseForm.value[row.prop]

    if (row.prop == 'address_code' && _value) {
      return _value.toString()
    }

    return FieldFormat(_value)
  }

  const isRequired = (row: any) => {
    if (
      props.askType == 'new' &&
      (row.prop == 'name' || row.prop == 'tel' || row.prop == 'contact')
    )
      return true
    if (
      props.askType == 'copy' &&
      (row.prop == 'name' || row.prop == 'tel' || row.prop == 'contact')
    )
      return true

    if (
      props.askType == 'update' &&
      (row.prop == 'tel' || row.prop == 'contact')
    )
      return true

    return false
  }
  const isDisable = (row: any) => {
    if (
      props.askType == 'update' &&
      (row.prop == 'name' || row.prop == 'number')
    )
      return true

    if (
      (props.askType == 'copy' || props.askType == 'new') &&
      row.prop == 'number'
    )
      return true

    return false
  }

  //更新数据
  const updateData = ({
    name,
    number,
    tel,
    contact,
    address_code,
    contact_address,
  }: any) => {
    baseForm.value = {
      name,
      number,
      tel,
      contact,
      address_code: address_code.split(',') || [],
      contact_address,
    }
  }
  //重置数据
  const resetData = () => {
    baseForm.value = {}
  }

  defineExpose({
    baseRef,
    baseForm,
    updateData,
    resetData,
  })
</script>
<style lang="scss" scoped>
  .box {
    margin-top: 62px;
    :deep() {
      .el-card__body {
        padding: 12px;
      }
    }
  }
  .descriptions {
    :deep() {
      .el-descriptions__body .el-descriptions__table .el-descriptions__cell {
        width: 33%;
      }
      .el-card__body {
        padding: 16px;
      }
    }
  }
</style>
